<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="preview/js/jquery.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="preview/js/prefixfree.min.js"></script>
    <script src="preview/js/browser.js"></script>
    <script src="preview/js/requestAnimationFrame.js"></script>
    <title>大数据单模块-天气</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        /*html,body{width: 100%;height: 100%}*/
        .weather{
            width: 1.5rem;height: 0.7rem;
            line-height: 1.3;
            font-size:0.18rem;!important;
            color:#b5b5b5;
        }
    </style>
</head>
<body>
    <div class="weather starModule">
        <p class="city">太原市</p>
        <p class="weatherLeft"></p>
        <p class="temperature"></p>
    </div>
</body>
<script>
    var countTimer = null,
        countNum = 0,
        myHZ=myexplorer(); //计数
    window.onresize = function(){
        getRem(100, 150);
    };
    window.onload = function(){
        getRem(100, 150);        //天气
        var place = $(".city").text().trim();
        getweather();
        count();
        function count() {
            //每次清空上一个定时器
            if(!!window.countTimer) cancelAnimationFrame(window.countTimer);
            countNum++;
            //一小时请求一次 requestAnimationFrame方法一秒默认在谷歌浏览器执行60次
            if(countNum >= 3600*myHZ) {
                countNum = 0;
                getweather();
            }
            //开启定时器
            window.countTimer = requestAnimationFrame(count);
        }
        function getweather(){
            $.ajax({
                url:"//wthrcdn.etouch.cn/weather_mini",
                type:"get",
                data:{city:place},
                /*预期服务器端返回的数据类型，假设我现在跨域了，我就改成jsonp 就可以了 */
                dataType:"jsonp",
                success:function(data){
                    var d = data.data.forecast[0];
                    var weather = d.type + " " + d.fengxiang;
                    var high = d.high.split(" ")[1];
                    var low = d.low.split(" ")[1];
                    $(".city").text(place);
                    $(".weatherLeft").text(weather);
                    $(".temperature").text(low + "/" + high);
                }
            });
        }
    }
</script>
</html>